<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">街路巷(小区):</div>
        <div class="input-item">
          <a-select
            v-model="queryParam.xQfDzbm"
            placeholder="请选择"
            show-search
            :filterOption="filterOption"
            allowClear
            @change="(value) => handleSelectChange(value, 1)"
            @popupScroll="handlePopupScroll"
            @search="handleSearch"
          >
            <a-select-option v-for="(item, index) in frontDataZ" :key="index" :value="item.fDzbm">
              {{ item.fName }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">建筑物:</div>
        <div class="input-item">
          <a-select
            allowClear
            v-model="queryParam.jzfDzbm"
            placeholder="请选择"
            @change="(value) => handleSelectChange(value, 2)"
          >
            <a-select-option v-for="(item, index) in buildingList" :key="index" :value="item.fDzbm">
              {{ item.fName }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">单元名称 :</div>
        <div class="input-item">
          <a-select
            allowClear
            v-model="queryParam.dyfDzbm"
            placeholder="请选择"
            @change="(value) => handleSelectChange(value, 3)"
          >
            <a-select-option v-for="(item, index) in unitList" :key="index" :value="item.fDzbm">
              {{ item.fName }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">楼层名称:</div>
        <div class="input-item">
          <a-select
            allowClear
            v-model="queryParam.lcfDzbm"
            placeholder="请选择"
            @change="(value) => handleSelectChange(value, 4)"
          >
            <a-select-option v-for="(item, index) in floorList" :key="index" :value="item.fDzbm">
              {{ item.fName }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">房间名称:</div>
        <div class="input-item">
          <a-select allowClear v-model="queryParam.fjfDzbm" placeholder="请选择">
            <a-select-option v-for="(item, index) in roomList" :key="index" :value="item.fDzbm">
              {{ item.fName }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">集体房:</div>
        <div class="input-item">
          <a-select allowClear ref="select" v-model="queryParam.fIsCollective" placeholder="请选择">
            <a-select-option v-for="(item, index) in flagTypeList" :key="index" :value="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        ref="table"
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { getCommunityList, getDictItemsFromCache, getSubordinateList } from '../../../api/api'
import { handleSelectChange } from '../../../utils/util'

export default {
  name: 'room',
  components: { startEndTime },
  mixins: [JeecgListMixinNew],
  props: {
    idCode: {
      type: String,
      default: '',
    },
    villageList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      url: {
        list: '/indeed/area/buildingRoomsList',
      },
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '街路巷(小区)',
          dataIndex: 'fJlxxqmc',
          ellipsis: true,
          width: 300,
          align: 'center',
        },
        {
          title: '建筑物',
          dataIndex: 'fJzwmc',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '单元',
          dataIndex: 'fDymc',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '楼层',
          dataIndex: 'fLcmc',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '房间',
          dataIndex: 'fShXh',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '是否集体房 ',
          dataIndex: 'fIsCollective',
          ellipsis: true,
          align: 'center',
          customRender: ({ text }) => {
            return text == 1 ? '是' : '否'
          },
        },
        {
          title: '采集时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
          width: 200,
        },
      ],
      project_company_type: [],
      times: {},
      buildingList: [],
      unitList: [],
      floorList: [],
      roomList: [],
      queryParam: this.initQueryParams(),
      flagTypeList: [],

      frontDataZ: [], //存放前100的数据
      sourceOwnerSystems: [],
      valueData: '',
      treePageSize: 100,
      scrollPage: 1,
    }
  },
  watch: {
    idCode(newVal) {
      this.extendParams.idCode = newVal
    },
    villageList(newVal) {
      this.frontDataZ = newVal.slice(0, 100)
    },
  },
  mounted() {
    this.flagTypeList = getDictItemsFromCache('flag_type')
    this.initPage()
  },
  methods: {
    handleSearch(val) {
      val = val ? val.trim() : val
      this.valueData = val
      if (!val) {
        // 顺便 把值清空
        this.queryParam.xQfDzbm = undefined
        // 如果 value 的值为 空的时候 取原始数据的前 100 条
        this.frontDataZ = this.villageList.slice(0, 100)
        return
      } else {
        this.frontDataZ = []
        this.scrollPage = 1
        this.villageList.forEach((item) => {
          if (item.fName.indexOf(val) >= 0) {
            this.frontDataZ.push(item)
          }
        })
        this.allDataZ = this.frontDataZ
        this.frontDataZ = this.frontDataZ.slice(0, 100)
      }
    },
    handlePopupScroll(e) {
      console.log('滚动')
      const { target } = e
      const scrollHeight = target.scrollHeight - target.scrollTop
      const clientHeight = target.clientHeight
      // 下拉框不下拉的时候
      if (scrollHeight === 0 && clientHeight === 0) {
        this.scrollPage = 1
        console.log(this.scrollPage)
      } else {
        // 当下拉框滚动条到达底部的时候
        if (scrollHeight < clientHeight + 5) {
          this.scrollPage = this.scrollPage + 1
          const scrollPage = this.scrollPage // 获取当前页
          const treePageSize = this.treePageSize * (scrollPage || 1) // 新增数据量
          const newData = [] // 存储新增数据
          let max = '' // max 为能展示的数据的最大条数
          if (this.villageList.length > treePageSize) {
            // 如果总数据的条数大于需要展示的数据
            max = treePageSize
          } else {
            // 否则
            max = this.villageList.length
          }
          // 判断是否有搜索
          if (this.valueData) {
            this.allDataZ.forEach((item, index) => {
              if (index < max) {
                // 当data数组的下标小于max时
                newData.push(item)
              }
            })
          } else {
            this.villageList.forEach((item, index) => {
              if (index < max) {
                // 当data数组的下标小于max时
                newData.push(item)
              }
            })
          }

          this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
        }
      }
    },
    initQueryParams() {
      return {
        xQfDzbm: undefined,
        jzfDzbm: undefined,
        dyfDzbm: undefined,
        lcfDzbm: undefined,
        fjfDzbm: undefined,
        fIsCollective: undefined,
      }
    },
    searchReset() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      this.queryParam = this.initQueryParams()
      this.buildingList = []
      this.unitList = []
      this.floorList = []
      this.roomList = []
      this.loadData(1)
    },
    handleSelectChange,
    filterOption(input, option) {
      const inputText = input ? input.trim().toLowerCase() : input
      return option.componentOptions.children[0].text.toLowerCase().indexOf(inputText) >= 0
    },
    searchQuery() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      const { startTime, endTime } = this.queryParam
      if ((startTime && !endTime) || (!startTime && endTime)) {
        this.$message.error('开始时间结束时间必须同时选择')
        return
      }
      this.loadData(1)
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.startTime = null
        }
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.endTime = null
        }
      }
    },
    async initPage() {
      try {
        console.log(res)
      } catch (error) {
      } finally {
      }
    },
  },
}
</script>
